Template:Main page/styles.css

.grid {
	display:grid;
	gap: 1rem;
	margin:1.5rem 0;
}

.grid * {
    box-sizing: border-box;
}

h1, h2, .mw-heading2, h3, h4, h5 {
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
}

h1, h3, h4, h5 {
    border-bottom: none;
}

.mw-heading2 {
	border-bottom: 1px solid #eaecf0;
}

h1:first-letter, h2:first-letter, h3:first-letter, h4:first-letter, h5:first-letter {
	text-transform: capitalize;
}

h1 {
	font-size: 2rem;
	margin-top: 0;
	padding-top: 0;
}
h1 .mw-editsection { display: none; }

h2 {
	font-size: 1.7rem;
}

h3 {
	font-size: 1.4rem;
}

h4 {
	font-size: 1.1rem;
}

/* VIDEO SECTION */

#video {
	grid-template-columns: 2fr 1fr; 
	grid-template-rows: repeat(4, 1fr) 0.3fr;
	grid-column-gap: 20px; grid-row-gap: 10px;
	margin-top: 0;
}

.video1 {grid-area:  1 / 1 / 6 / 2;}
.video-prev {
	padding-left: 10px;
	border-bottom: 1px dashed #ccc;
	max-height: 100px;
	overflow: scroll;
	font-size: 90%;
	line-height: 1em;
}
.video2 {
	padding-left: 10px;
	border-top: 1px dashed #999;
	padding-top: 4px;
	grid-area: 1 / 2 / 2 / 3;
}
.video3 {grid-area: 2 / 2 / 3 / 3;}
.video4 {grid-area: 3 / 2 / 4 / 3;}
.video5 {grid-area: 4 / 2 / 5 / 3;}
.more-video { grid-area: 5 / 2 / 6 / 3; }

.video-date-today h4 {
	margin-top: 0;
	padding-top: 0;
	color: #333;}
	
.video-date {color: #333;}